<script lang="ts" setup>
withDefaults(defineProps<{
  modelValue: boolean
  defaultContainer?: boolean
  containerColor?: string
}>(), {
  defaultContainer: true,
  containerColor: '#0000001f',
})

defineEmits([
  'update:modelValue',
])
</script>

<template>
  <div
    :style="{
      transitionDuration: `0.15s`,
      backdropFilter: `blur(16px)`,
      transitionProperty: `opacity`,
      opacity: modelValue ? 1 : 0,
      height: modelValue ? '100vh' : '0',
      backgroundColor: '#ffffff44',
    }"
    fixed left-0 top-0 z-10 h-100vh w-full flex-cc overflow-hidden
    @click="$emit('update:modelValue', false)"
  >
    <div v-if="defaultContainer" w="80%" :style="{ backgroundColor: containerColor }" paper b-rd-4 p4 @click.stop>
      <slot />
    </div>
    <slot v-else />
  </div>
</template>

<style scoped>

</style>
